<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <input type="checkbox" v-model="isOk" />

        <hr />
        <div>
          <input type="checkbox" id="zj" v-model="selectArr" value="周杰伦" />
        </div>
        <!-- label作用 让点击文字也能勾选 -->
        <label for="zj">周杰伦</label>

        <input type="checkbox" v-model="selectArr" value="毛不易" />毛不易
        <input type="checkbox" v-model="selectArr" value="肖争光" />肖争光
        <input type="checkbox" v-model="selectArr" value="迪丽热巴" />迪丽热巴
      </div>
      <hr />
      <div>
        <input type="radio" id="n" v-model="sex" value="男" />
        <label for="n">男</label>
        <input type="radio" id="nv" v-model="sex" value="女" />
        <label for="nv">女</label>
      </div>
      <hr />

      <div>
        <select
          name=""
          id="input"
          class="form-control"
          v-model="selectedCourseArr"
          multiple
        >
          <!-- <option val ue="请选择" disabled>请选择</option> -->
          <option value="1">思修</option>
          <option value="2">艺术鉴赏</option>
          <option value="3">xxx</option>
        </select>
      </div>
      <hr />
      <div>
        <select
          name=""
          id="input"
          class="form-control"
          v-model="selectedCourseArr2"
          multiple
        >
          <!-- <option val ue="请选择" disabled>请选择</option> -->
          <option  v-for="v in arr" :value="v.id" >{{v.name}}</option>
         
        </select>
      </div>
      <hr />
      <button @click="btnHandle()">按钮</button>
    </div>

    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            isOk: false,
            selectArr: [],
            sex: "",
            selectedCourse: "",
            selectedCourseArr:[],
            selectedCourseArr2:[],
            arr:[
              {id:2,name:"数学"},
              {id:4,name:"语文"},
            ],
          };
        },
        methods: {
          btnHandle() {
            console.log(this.isOk);
            console.log(this.selectArr);
            console.log(this.sex);
            console.log(this.selectedCourse);
            console.log(this.selectedCourseArr);
            console.log(this.selectedCourseArr2);
          },
        },
      });
    </script>
  </body>
</html>
